<template>
  <div class="certification">
    <div class="type">状态：{{res.auditStatus==='PASS'?'已通过':'待审核'}}</div>
    <div class="content">
      <div class="flex" style="padding-bottom:20px">
        <span class="flex-1 left">手机号</span>
        <span class="right">{{res.phone}}</span>
      </div>
      <div class="flex" style="padding-bottom:20px">
        <span class="flex-1 left">姓名</span>
        <span class="right">{{res.customerName}}</span>
      </div>
      <div class="flex" style="padding-bottom:20px">
        <span class="flex-1 left">证件类型</span>
        <div class="right flex align-center">
          <span>{{res.documentType==="IDENTITY_CARD"?"身份证":"护照"}}</span>
          <img
            src="/static/images/manage/right.png"
            style="width:10px;height:14px;margin-left:8px"
            alt
          />
        </div>
      </div>
      <div class="flex" style="padding-bottom:20px; border-bottom: 0.5px solid #e6e6e6;">
        <span class="flex-1 left">证件号</span>
        <span class="right">{{res.certificateNumber}}</span>
      </div>
    </div>
    <div class="card">
      <div class="flex" v-if="res.documentType==='IDENTITY_CARD'">
        <div class="flex-1">
          <p>身份证正面</p>
          <img :src="res.certFrontImg" class="cardImg" alt />
        </div>
        <div class="flex-1">
          <p>身份证背面</p>
          <img :src="res.certBackImg" class="cardImg" alt />
        </div>
      </div>
      <div class="flex" v-else>
        <div class="flex-1">
          <p>护照信息页</p>
          <img :src="res.certFrontImg" class="cardImg" alt />
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { realInfo } from "@/api/api";
export default {
  props: {},
  data() {
    return {
      name: "",
      IDtype: "",
      IDcard: "",
      id: null,
      res: {}
    };
  },
  computed: {},
  created() {},
  mounted() {
    // 可以将当前状态的data重置为初始状态
    Object.assign(this.$data, this.$options.data());
    this.id = this.$mp.query.id;
    this.realInfo(this.id);
  },
  watch: {},
  methods: {
    async realInfo(id) {
      await realInfo(id).then(res => {
        if (!res.code) {
          this.res = res;
        }
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.certification {
  .type {
    width: 100%;
    height: 48px;
    background: #f3f7f8;
    font-size: 14px;
    color: #187798;
    padding-left: 15px;
    line-height: 48px;
  }
  .card {
    padding: 26px 15px 0 15px;
    font-size: 14px;
    color: #020604;
    .cardImg {
      width: 166px;
      height: 100px;
      margin-top: 15px;
    }
  }
  .content {
    padding: 20px 15px 5px 15px;

    .left {
      font-size: 14px;
      color: #020604;
    }
    .right {
      font-size: 14px;
      color: #6b6b6b;
    }
  }
}
</style>
